<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/admin_login.css">
  <link rel="icon" type="image/png" href="images/chromatic_logo.png">
  <title>Chromatic竞赛信息管理系统</title>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
  <a id="register-link">注册</a>
  <a id="login-link">登录</a>
</nav>

<!-- 网站标题 -->
<div class="header">
  <img src="images/chromatic_logo.png" style="width: 100px;height: 100px" alt="chromatic logo">
  <div class="website-title">Chromatic竞赛信息管理系统</div>
</div>
<!-- 登录表单 -->
<div class="form-container" id="login-container">
  <form class="form" id="login-form">
    <h2 style="text-align: center;">登录</h2>
    <label><input type="text" name="username" placeholder="管理员用户名" /></label>
    <label><input type="password" name="password" placeholder="管理员密码" /></label>
    <input type="submit" value="登录" />
  </form>
</div>

<!-- 注册表单 -->
<div class="form-container hidden" id="register-container">
  <form class="form" id="register-form">
    <h2 style="text-align: center;">注册</h2>
    <label><input type="text" name="username" placeholder="用户名" /></label>
    <label><input type="text" name="phone-number" placeholder="手机号" id="phone-number"/></label>
    <div style="display: flex;">
      <label><input style="flex: 1;" type="text" name="sms-verification-code" placeholder="验证码（5分钟内有效）"/></label>
      <input id="SmsBtn" style="flex: 1;margin-left: 10px;" type="button" value="发送验证码">
    </div>
    <label><input type="password" name="password" placeholder="密码" /></label>
    <label><input type="password" name="confirm-password" placeholder="确认密码" /></label>
    <!--          <label><input type="text" name="invitation-code" placeholder="邀请码"/></label>-->
    <input type="submit" value="注册" />
  </form>
</div>

<script src="js/login.js"></script>
<script src="js/register.js"></script>
</body>
</html>